<template>
    <div>
        <page-header title="数据可视化" content="data visualization"></page-header>
        <el-row>
            <el-col :span="12">
                <page-main title="年份平均工资图">
                    <ve-line :data="salaryAndGYVisChartData"></ve-line>
                </page-main>
            </el-col>
            <el-col :span="12">
                <page-main title="年份毕业人数图">
                    <ve-pie :data="personCountAndGYVisChartData"></ve-pie>
                </page-main>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <page-main title="学历平均工资图">
                    <ve-line :data="salaryAndEDVisChartData"></ve-line>
                </page-main>
            </el-col>
            <el-col :span="12">
                <page-main title="学历人数图">
                    <ve-histogram :data="personCountAndEDVisChartData"></ve-histogram>
                </page-main>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <page-main title="专业平均工资图">
                    <ve-line :data="salaryAndPFVisChartData"></ve-line>
                </page-main>
            </el-col>
            <el-col :span="12">
                <page-main title="专业人数图">
                    <ve-histogram :data="personCountAndPFVisChartData"></ve-histogram>
                </page-main>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'data_visualization',
    data() {
        this.chartSettings = {
                        dimension: '毕业年份',
                        metrics: ['薪资']
                    }
        return {
            salaryAndGYVisChartData: {
                columns: [],
                rows: []
            },
            personCountAndGYVisChartData: {
                columns: [],
                rows: []
            },
            salaryAndEDVisChartData: {
                columns: [],
                rows: []
            },
            personCountAndEDVisChartData: {
                columns: [],
                rows: []
            },
            salaryAndPFVisChartData: {
                columns: [],
                rows: []
            },
            personCountAndPFVisChartData: {
                columns: [],
                rows: []
            }
        }
    },
    methods: {
        processData(obj, res) {
            obj.columns = res[res.length-1]
            res.pop();
            obj.rows = []
            res.forEach(element => {
                obj.rows.push(element)
            }); 
        }
    },
    created() {
        this.$util.post('public/salaryAndGYVis').then(res => {
            this.processData(this.salaryAndGYVisChartData, res)
        })
        this.$util.post('public/personCountAndGYVis').then(res => {
            this.processData(this.personCountAndGYVisChartData, res)
        })
        this.$util.post('public/salaryAndEDVis').then(res => {
            this.processData(this.salaryAndEDVisChartData, res)
        })
        this.$util.post('public/personCountAndEDVis').then(res => {
            this.processData(this.personCountAndEDVisChartData, res)
        })
        this.$util.post('public/salaryAndPFVis').then(res => {
            this.processData(this.salaryAndPFVisChartData, res)
        })
        this.$util.post('public/personCountAndPFVis').then(res => {
            this.processData(this.personCountAndPFVisChartData, res)
        })
    }
}
</script>
